<!-- 我的团队 -->
<template>
	<view class="page_box team-wrap">
		<view class="head_box">
			<!-- 推荐人 -->
			<view class="referrer-box u-flex u-p-x-20">
				<view class="invitor-box">
					<text>推荐人：</text>
					<view class="invitor-user" v-if="referrerInfo" @click="jump('/pages/user/recommend/index', { id: referrerInfo.id })">
						<image class="referrer-avatar u-m-r-10" :src="referrerInfo.avatar" mode=""></image>
						{{ referrerInfo.nickname }}
						<u-icon name="arrow-right"></u-icon>
					</view>
					<view v-else>暂无</view>
				</view>
			</view>

			<!-- 团队数据总览 -->
			<view class="team-data-box">
				<view class="data-card">
					<view class="total-item" @click="jump('/pages/app/agent/team-list', { type:'all' })">
						<view class="item-title">队友(人)</view>
						<view class="total-num">{{ count.all || 0 }}</view>
					</view>
					<view class="category-item u-flex">
						<view class=" u-flex-1" @click="jump('/pages/app/agent/team-list', { type:'direct' })">
							<view class="item-title">队友</view>
							<view class="category-num">{{ count.direct || 0 }}</view>
						</view>
						<view class=" u-flex-1" @click="jump('/pages/app/agent/team-list', { type:'other' })">
							<view class="item-title">其它队友</view>
							<view class="category-num">{{ count.other || 0 }}</view>
						</view>
					</view>
				</view>
			</view>

			<view class="data-num-box" style="display: none;">
				<view class="num-item" @click="jump('/pages/app/agent/team-list', { type:'today' })">
					<view class="item-title">今日新增</view>
					<view class="total-num">{{ count.today || 0 }}</view>
				</view>

				<view class="num-item" @click="jump('/pages/app/agent/team-list', { type:'yesterday' })">
					<view class="item-title">昨日新增</view>
					<view class="total-num">{{ count.yesterday || 0 }}</view>
				</view>

				<view class="num-item" @click="jump('/pages/app/agent/team-list', { type:'month' })">
					<view class="item-title">本月新增</view>
					<view class="total-num">{{ count.month || 0 }}</view>
				</view>

				<view class="num-item" @click="jump('/pages/app/agent/team-list', { type:'ulto' })">
					<view class="item-title">上月新增</view>
					<view class="total-num">{{ count.ulto || 0 }}</view>
				</view>
			</view>

			<view class="team-data-box" style="display:none">
				<view class="data-card m-b-30">
					<view class="total-item total-flex" @click="jump('/pages/app/agent/team-list', { type:'general' })">
						<view class="item-title2">普通会员(人)</view>
						<view class="total-num">{{ count.general || 0 }}</view>
					</view>
				</view>
				<view class="data-card m-b-30">
					<view class="total-item total-flex" @click="jump('/pages/app/agent/team-list', { type:'level2' })">
						<view class="item-title2">体验店(人)</view>
						<view class="total-num">{{ count.level2 || 0 }}</view>
					</view>
				</view>
				<view class="data-card m-b-30">
					<view class="total-item total-flex" @click="jump('/pages/app/agent/team-list', { type:'level3' })">
						<view class="item-title2">区级代理(人)</view>
						<view class="total-num">{{ count.level3 || 0 }}</view>
					</view>
				</view>
				<view class="data-card m-b-30">
					<view class="total-item  total-flex" @click="jump('/pages/app/agent/team-list', { type:'level4' })">
						<view class="item-title2">县级代理(人)</view>
						<view class="total-num">{{ count.level4 || 0 }}</view>
					</view>
				</view>
				<view class="data-card m-b-30">
					<view class="total-item total-flex" @click="jump('/pages/app/agent/team-list', { type:'level5' })">
						<view class="item-title2">市级代理(人)</view>
						<view class="total-num">{{ count.level5 || 0 }}</view>
					</view>
				</view>
				<view class="data-card m-b-30">
					<view class="total-item total-flex" @click="jump('/pages/app/agent/team-list', { type:'level6' })">
						<view class="item-title2">省级代理(人)</view>
						<view class="total-num">{{ count.level6 || 0 }}</view>
					</view>
				</view>
			</view>
		</view>

		<view class="content_box" style="display: none;">
			<scroll-view scroll-y="true" @scrolltolower="loadMore" class="scroll-box">
				<!-- 团队列表 -->
				<view class="team-box">
					<view class="team-list" v-for="(item, index) in teamList" :key="item.id">
						<sh-collapse-item
							:avatar="item.avatar"
							:dateTime="item.createtime"
							:level="item.agent ? item.agent.level : null"
							:name="item.nickname"
							:isUnfold="item.isUnfold"
							:childNum="item.child_user_count"
							@click="onTeamList(item.id)"
						>
							<view slot="collapse-children" v-if="childrenTeamList.length">
								<view class="team-children u-flex" v-for="children in childrenTeamList" :key="children.id">
									<image class="head-img" :src="children.avatar" mode=""></image>
									<view class="head-info">
										<view class="name-box u-flex">
											<view class="name-text">{{ children.nickname }}</view>
											<view class="grade-tag tag-box u-flex" v-if="children.agent">
												<image class="tag-img" :src="children.agent ? children.agent.level.image : ''" mode=""></image>
												<text class="tag-title">{{ children.agent ? children.agent.level.name : '' }}</text>
											</view>
										</view>
										<view class="head-time">{{ $u.timeFormat(children.createtime, 'yyyy年mm月dd日') }}</view>
									</view>
								</view>
								<button class="cu-btn refresh-btn u-flex u-row-center u-col-center" @tap.stop="childrenLoadMore(item.id)">
									<u-icon
										v-if="childrenCurrentPage < childrenLastPage"
										:class="{ 'refresh-active': isRefresh }"
										class="u-m-r-10"
										name="reload"
										size="26"
										color="#999"
									></u-icon>
									{{ childrenLoad ? '点击加载更多' : '没有更多~' }}
								</button>
							</view>
						</sh-collapse-item>
					</view>
				</view>
				<!-- 缺省页 -->
				<shopro-empty v-show="isEmpty" marginTop="50rpx" :image="$IMG_URL + '/imgs/empty/no_team.png'" tipText="暂无团队人员"></shopro-empty>
				<!-- 更多 -->
				<u-loadmore v-if="teamList.length" height="80rpx" :status="loadStatus" icon-type="flower" color="#ccc" />
			</scroll-view>
		</view>
	</view>
</template>

<script>
import shCollapseItem from '../components/sh-collapse-item.vue';
import { mapMutations, mapActions, mapState } from 'vuex';
export default {
	components: {
		shCollapseItem
	},
	data() {
		return {
			backTextStyle: {
				color: '#fff',
				fontSize: '40rpx',
				fontWeight: '500'
			},
			isEmpty: false,
			referrerInfo: {}, //推荐人信息
			twoTeamCount: 0, //二级成员
			teamList: [], //团队列表
			loadStatus: 'loadmore', //loadmore-加载前的状态，loading-加载中的状态，nomore-没有更多的状态
			currentPage: 1,
			lastPage: 1,
			// 二级
			childrenTeamList: [],
			childrenCurrentPage: 1,
			childrenLastPage: 1,
			childrenLoad: false,
			isRefresh: false,
			data: {},
			count: {}
		};
	},
	computed: {
		...mapState({
			userInfo: ({ user }) => user.userInfo,
			agentInfo: ({ user }) => user.agentInfo
		})
	},
	onLoad() {},
	async created() {
		await this.myTeam();
		await this.getRefer();
	},
	methods: {
		...mapActions('user',['getAgent']),

		// 点击队员项
		jump(path, parmas) {
			this.$Router.push({
				path: path,
				query: parmas
			});
		},
		onTeamList(id) {
			this.jump('/pages/app/agent/view', { id: id, type: 1 });
		},

		async myTeam() {
			const res = await this.$http('agent.teamCount');
			if (res.code !== 0) this.count = res.data;
		},

		async getRefer() {
			const res = await this.$http('agent.referrer');
			if (res.code !== 0) this.referrerInfo = res.data;
		},

		// 二级队员
		getChildrenTeam(id) {
			let that = this;
			that.$http(
				'commission.team',
				{
					id: id,
					page: that.childrenCurrentPage
				},
				'加载中...'
			).then(res => {
				if (res.code === 1) {
					that.childrenTeamList = [...that.childrenTeamList, ...res.data.teams.data];
					that.childrenLastPage = res.data.teams.last_page;
					that.childrenLoad = that.childrenCurrentPage < res.data.teams.last_page;
				}
			});
		},

		// 二级加载更多
		childrenLoadMore(id) {
			if (!this.isRefresh) {
				// 加载更多
				if (this.childrenCurrentPage < this.childrenLastPage) {
					this.isRefresh = true;
					this.childrenCurrentPage += 1;
					this.getChildrenTeam(id);
				}
			}
		},

		// 加载更多
		loadMore() {
			if (this.currentPage < this.lastPage) {
				this.currentPage += 1;
				this.getTeam();
			}
		}
	}
};
</script>

<style lang="scss">
// 推荐人

.item-title2 {
	font-size: 22rpx;
	font-weight: 500;
	color: #999999;
}
.total-flex {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.team-data-box .data-card .total-flex {
	margin-bottom: 0rpx !important;
	.total-num {
		font-size: 30rpx;
	}
}
.m-b-30 {
	margin-bottom: 30rpx;
}
.invitor-box {
	display: flex;
	justify-content: flex-start;
	align-items: center;
	.invitor-user {
		display: flex;
		justify-content: flex-start;
		align-items: center;
		.u-icon {
			margin-left: 30rpx;
		}
	}
}
.referrer-box {
	font-size: 28rpx;
	font-weight: 500;
	color: #ffffff;
	margin-top: 10rpx;
	padding-top: 20rpx;
	.referrer-avatar {
		width: 34rpx;
		height: 34rpx;
		border-radius: 50%;
	}
}
// 二级加载更多按钮
.refresh-btn {
	width: 100%;
	line-height: 100rpx;
	background: #ffffff;
	border-radius: 25rpx;
	font-size: 22rpx;
	font-weight: 500;
	color: #999999;
	white-space: nowrap;
	.cuIcon-refresh {
		color: #dbdbdb;
		margin-right: 12rpx;
		font-size: 32rpx;
	}
}
.refresh-active {
	transform: rotate(360deg);
	transition: all linear 0.5s;
}
// 头部卡片
.head_box {
	background: url($IMG_URL+'/imgs/commission/card_bg.png') no-repeat;
	background-size: 100% 100%;
	padding-bottom: 30rpx;
}

//数据展示BOX
.data-num-box {
	margin: 30rpx 20rpx 0;
	display: flex;
	justify-content: flex-start;
	align-items: center;
	background: #ffffff;
	border-radius: 20rpx;
	padding: 20rpx;

	.num-item {
		width: 100%;
		margin: 20rpx 10rpx;
		.item-title {
			font-size: 22rpx;
			font-weight: 500;
			color: #999999;
			line-height: 30rpx;
			margin-bottom: 10rpx;
		}

		.total-num {
			font-size: 26rpx;
			font-weight: 500;
			color: #333333;
		}
	}
}

// 团队信息总览
.team-data-box {
	margin: 30rpx 20rpx 0;

	.data-card {
		width: 710rpx;
		background: #ffffff;
		border-radius: 20rpx;
		padding: 20rpx;

		.item-title {
			font-size: 22rpx;
			font-weight: 500;
			color: #999999;
			line-height: 30rpx;
			margin-bottom: 10rpx;
		}

		.total-item {
			margin-bottom: 20rpx;
		}

		.total-num {
			font-size: 38rpx;
			font-weight: 500;
			color: #333333;
		}

		.category-num {
			font-size: 26rpx;
			font-weight: 500;
			color: #333333;
		}
	}
}

// 团队列表
.team-box {
	.team-list {
		.team-children {
			margin-left: 80rpx;
			margin-right: 20rpx;
			height: 132rpx;
			border-bottom: 1rpx solid #eee;

			.head-img {
				width: 60rpx;
				height: 60rpx;
				border-radius: 50%;
				margin-right: 38rpx;
			}

			.head-info {
				.head-time {
					font-size: 22rpx;
					font-weight: 400;
					color: #999999;
				}

				.name-box {
					margin-bottom: 12rpx;

					.name-text {
						font-size: 24rpx;
						font-weight: 500;
						color: #666;
					}

					.tag-box {
						background: rgba(0, 0, 0, 0.2);
						border-radius: 21rpx;
						line-height: 30rpx;
						padding-right: 10rpx;
						margin-left: 10rpx;

						.tag-img {
							width: 34rpx;
							height: 34rpx;
							margin-right: 6rpx;
							border-radius: 50%;
						}

						.tag-title {
							font-size: 18rpx;

							font-weight: 500;
							color: rgba(255, 255, 255, 1);
							line-height: 20rpx;
						}
					}
				}
			}
		}
	}
}
</style>
